<template>
  <el-card class="exam-setting"
           shadow="never">
    <el-form ref="formRef"
             :model="form"
             :rules="formRules"
             label-width="100"
             style="width: 500px;">
      <el-form-item label="考试名称："
                    prop="name">
        <el-input v-model="form.name"
                  placeholder="请输入考试名称" />
      </el-form-item>
      <el-form-item label="考试时间："
                    prop="examTimes">
        <el-date-picker v-model="form.examTimes"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
      <el-form-item label="场次时间："
                    prop="SessionTime">
        <el-time-picker v-model="form.SessionTime"
                        placeholder="场次时间" />
      </el-form-item>
      <el-form-item v-if="form.markType === 2"
                    label="阅卷时间："
                    prop="markTimes">
        <el-date-picker v-model="form.markTimes"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss">
        </el-date-picker>
        <el-alert :title="`需要阅卷题号：${markQuestions}`"
                  type="warning"
                  :closable="false" />
      </el-form-item>
      <el-form-item label="及格分数："
                    prop="passScore">
        <el-input-number v-model="form.passScore"
                         controls-position="right"
                         :min="0"
                         :max="form.totalScore"
                         :step="10"
                         :precision="1" />&nbsp;/ {{form.totalScore}}分
      </el-form-item>
      <el-form-item v-if="form.genType === 1"
                    label="防作弊："
                    prop="sxes">
        <el-checkbox-group v-model="form.sxes">
          <el-checkbox :label="1"
                       key="1">试题乱序</el-checkbox>
          <el-checkbox :label="2"
                       key="2">选项乱序</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item v-if="form.genType === 1" label="匿名阅卷：" prop="anonState">
                <el-radio-group v-model="form.anonState">
                    <el-radio v-for="(option, index) in dictStore.getList('STATE_YN')" :key="index" :label="parseInt(option.dictKey)">
                        {{ option.dictValue }}
                    </el-radio>
                </el-radio-group>
            </el-form-item> -->
      <el-form-item label="成绩查询："
                    prop="scoreState">
        <el-radio-group v-model="form.scoreState">
          <el-radio v-for="(option, index) in dictStore.getList('SCORE_STATE')"
                    :key="index"
                    :label="parseInt(option.dictKey)">
            {{ option.dictValue }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排名公布："
                    prop="rankState">
        <el-radio-group v-model="form.rankState">
          <el-radio v-for="(option, index) in dictStore.getList('STATE_ON')"
                    :key="index"
                    :label="parseInt(option.dictKey)">
            {{ option.dictValue }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { useDictStore } from '@/stores/dict'
import { useExamStore, type ExamQuestion } from '@/stores/exam'
import dayjs from 'dayjs'
import type { FormInstance, FormRules } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue'

// 定义变量
defineExpose({ next })
const dictStore = useDictStore() // 字典缓存
const formRef = ref<FormInstance>() // 表单引用
const form = useExamStore()
const formRules = reactive<FormRules>({
  // 表单校验规则
  name: [
    { required: true, message: '请输入考试名称', trigger: 'blur' },
    { min: 1, max: 16, message: '长度介于1-16', trigger: 'blur' },
  ],
  examTimes: [
    {
      trigger: 'change',
      validator: (rule: any, value: string[], callback: any) => {
        if (!value || !value[0] || !value[1]) {
          return callback(new Error('请选择考试时间'))
        }
        if (
          dayjs(value[0], 'YYYY-MM-DD HH:mm:ss').toDate() >=
          dayjs(value[1], 'YYYY-MM-DD HH:mm:ss').toDate()
        ) {
          return callback(new Error('开始时间必须小于结束时间'))
        }
        return callback()
      },
    },
  ],
  SessionTime: [
    {
      trigger: 'change',
      validator: (rule: any, value: string[], callback: any) => {
        console.log(value)

        if (!value) {
          return callback(new Error('请选择场次时间'))
        }
        return callback()
      },
    },
  ],
  markTimes: [
    {
      trigger: 'change',
      validator: (rule: any, value: any, callback: any) => {
        if (!form.markTimes || !form.markTimes[0] || !form.markTimes[1]) {
          return callback(new Error('请选择阅卷时间'))
        }
        if (
          dayjs(form.markTimes[0], 'YYYY-MM-DD HH:mm:ss').toDate() >=
          dayjs(form.markTimes[1], 'YYYY-MM-DD HH:mm:ss').toDate()
        ) {
          return callback(new Error('开始时间必须大于结束时间'))
        }
        if (
          dayjs(form.examTimes[1], 'YYYY-MM-DD HH:mm:ss').toDate() >=
          dayjs(form.markTimes[0], 'YYYY-MM-DD HH:mm:ss').toDate()
        ) {
          return callback(new Error('考试结束时间必须小于阅卷开始时间'))
        }
        return callback()
      },
    },
  ],
  passScore: [{ required: true, message: '请输入及格分数：', trigger: 'blur' }],
})
const markQuestions = computed(() => {
  // 阅卷题号
  let questionNums = ''
  form.markQuestions.forEach((markQuestion: ExamQuestion) => {
    if (questionNums) {
      questionNums += '、'
    }
    questionNums += markQuestion.no
  })
  return questionNums
})

// 组件挂载完成后，执行如下方法
onMounted(async () => {
  // 如果没有及格分数，默认为总分的百分之六十
  if (!form.passScore) {
    form.passScore = Math.round(form.totalScore * 0.6)
  }

  // 如果是随机组卷，去掉随机选项
  if (form.genType === 2) {
    form.sxes = []
  }
})

// 下一步
async function next() {
  if (!formRef.value) return false
  return await formRef.value.validate((valid, fields) => {
    return valid
  })
}
</script>

<style lang="scss" scoped>
.exam-setting {
  flex: 1;
  .el-alert {
    padding: 0;
    height: 24px;
    :deep(.el-alert__title) {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
